import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex';

const usePoint = () => {
    const store = useStore();
    const cityListState = computed<{ city: string; cityCode: string | number }[]>(
        () => store.state.userGroup.userInfo?.cityList
    );
    const cityList = computed(() =>
        cityListState.value.map((item) => ({
            label: item.city,
            value: item.cityCode,
        }))
    );
    const formData = reactive({
        publishTime: '', // 投放时间
        beginTime: '', // 开始时间
        city: '', // 投放城市(eg:510100)
        deliveryMode: '', // 选点方式(001,无限制;002,每个单元最多只选一部电梯;003,每个单元最多只选一半电梯)
        endTime: '', // 结束时间
        ignoreTaboo: 0, // 是否忽略行业禁忌,默认传0(0,否;1,是)
        locationUrl: '', // 多坐标匹配
        numbers: '', // 投放频次
        planSource: '', // 订单来源
        pointStatus: '', // 是否联网(0,全部;1,是;2,否)
        premisesType: [], //
        seconds: '', // 广告时长
        trade: '', // 投放行业
        type: '', // 屏幕类型(001,上屏;002,下屏;003,联动)
    });
    const columns = computed(() => [
        {
            label: '投放时间',
            prop: 'publishTime',
            render: () => {
                return (
                    <el-date-picker
                        class="begin-date"
                        v-model={formData.publishTime}
                        type="date"
                        placeholder="选择日期"
                        value-format="YYYY-MM-DD"
                    ></el-date-picker>
                );
            },
        },
        {
            label: '投放城市',
            prop: 'city',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: cityList.value,
            on: {
                change: (cityCode: number | string) => {
                    store.commit('plan/setSelectedCity', cityCode);
                },
            },
        },
        {
            label: '投放行业',
            prop: 'trade',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: tradeList.value,
        },
        {
            label: '投放时长',
            prop: 'seconds',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: secondsList.value,
        },
        {
            label: '投放频次',
            prop: 'numbers',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: numbersList.value,
        },
        {
            label: '屏幕类型',
            prop: 'type',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: typeList,
        },
        {
            label: '屏幕位置',
            prop: 'planStatus',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: planStatusList,
        },
        {
            label: '选点方式',
            prop: 'deliveryMode',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: deliveryModeList,
        },
        {
            label: '物业类型',
            prop: 'premisesType',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: premisesTypeList,
        },
        {
            label: '是否联网',
            prop: 'pointStatus',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            options: pointStatusList,
        },
    ]);

    return {
        formData,
        columns,
    };
};
export default usePoint;
